<script setup lang="ts">
import { ref, reactive } from "vue";
import { apiBaseCol } from "assets/js/constant.js";
import selectorList from "./components/selectorList.vue";
interface IselectorData {
  label: string;
  remark: string;
  ischeck: boolean;
  isdisabled: boolean;
}
const selectorData1: Array<IselectorData> = [
  { label: "选项一", remark: "", ischeck: false, isdisabled: false },
  { label: "选项二", remark: "有一点备注", ischeck: false, isdisabled: false },
  {
    label: "选项二",
    remark: "描述超级超级超级超级超级超级多的文案",
    ischeck: false,
    isdisabled: false,
  },
  {
    label: "选项三",
    remark: "描述超级超级超级超级超级超级超级超级超级超级超级多的文案",
    ischeck: false,
    isdisabled: false,
  },
];

const selectorData2: Array<IselectorData> = [
  { label: "选项四", remark: "", ischeck: false, isdisabled: false },
  { label: "选项五", remark: "有一点备注", ischeck: false, isdisabled: true },
  { label: "选项六", remark: "有一点备注", ischeck: false, isdisabled: false },
  { label: "选项七", remark: "有一点备注", ischeck: false, isdisabled: false },
  { label: "选项八", remark: "有一点备注", ischeck: false, isdisabled: true },
  { label: "选项九", remark: "有一点备注", ischeck: false, isdisabled: false },
  {
    label: "选项十",
    remark: "描述超级超级超级超级超级超级多的文案",
    ischeck: false,
    isdisabled: false,
  },
  {
    label: "选项十一",
    remark: "描述超级超级超级超级超级超级超级超级超级超级超级多的文案",
    ischeck: false,
    isdisabled: false,
  },
];

function getSelectorValues(items: IselectorData, key: string, type: string) {
  console.log(items);
  console.log(key);
  console.log(type);
}

const dataSource = reactive([
  {
    key: "1",
    name: "columns",
    param: "string",
    desc: "几列布局，一行几列",
  },
  {
    key: "1",
    name: "selectorData",
    param: " Array<IselectorData>",
    desc: "数据",
  },
  {
    key: "1",
    name: "isshowType",
    param: "boolean",
    desc: "是否展示标题后的（单选）、（多选）提示文字",
  },
  {
    key: "1",
    name: "keyName",
    param: "string",
    desc: "key值标识名称",
  },
  {
    key: "2",
    name: "selectorTitle",
    param: "string",
    desc: "标题名称",
  },
  {
    key: "3",
    name: "selectorType",
    param: "string",
    desc: "单选(radio)还是多选(check)",
  },
]);
</script>
<template>
  <div class="container">
    <div class="left-box">
      <div class="public-flex-box">
        <div class="public-title-bold">介绍</div>
        <div class="public-content-text">
          在一组备选项中进行多选或者单选选项。
        </div>
      </div>
      <div class="public-flex-box">
        <div class="public-title-bold">引入</div>

        <pre class="public-content-code">
        <code
          class="language-css"
        >
          import { HxqSelector } from "vue-mobile-hxq";
        </code></pre>
      </div>
      <div class="public-outside-title">代码展示</div>
      <div class="public-flex-box">
        <div class="public-title-bold">一行两列单选禁用</div>
        <div class="public-content-text">
          columns：字段控制列数，以下案例为一行两列。数据内isdisabled字段控制是否禁用、ischeck控制是否默认选中选项。
          isshowType：控制是否展示标题后面（单选）（多选）的文字
        </div>
        <pre class="public-content-code">
        <code
          id="code-2"
          class="language-markup line-numbers"
          style="text-align: left"
        >
&lt;script setup lang="ts">
    interface IselectorData {
        label: string;
        remark: string;
        ischeck: boolean;
        isdisabled: boolean;
    }
    const selectorData1: Array &lt;IselectorData> = [
    { label: "选项一", remark: "", ischeck: false, isdisabled: false },
    { label: "选项二", remark: "有一点备注", ischeck: false, isdisabled: false },
    {
        label: "选项二",
        remark: "描述超级超级超级超级超级超级多的文案",
        ischeck: false,
        isdisabled: false,
    },
    {
        label: "选项三",
        remark: "描述超级超级超级超级超级超级超级超级超级超级超级多的文案",
        ischeck: false,
        isdisabled: false,
    },
    ];
    function getSelectorValues(items: IselectorData, key: string, type: string) {
        console.log(items);
        console.log(key);
        console.log(type);
    }
    &lt;/script>
        </code></pre>
        <pre class="public-content-code">
        <code
          id="code-2"
          class="language-markup line-numbers"
          style="text-align: left"
        >
        &lt;hxq-selector
          :selectorTitle="'有标题'"
          :selectorType="'radio'"
          columns="2"
          :selectorData="selectorData1"
          @getSelectorValues="getSelectorValues"
          keyName="one"
        >&lt;/hxq-selector>
      </code></pre>
      </div>

      <div class="public-flex-box">
        <div class="public-title-bold">一行三列多选禁用</div>
        <pre class="public-content-code">
        <code
          id="code-2"
          class="language-markup line-numbers"
          style="text-align: left"
        >
const selectorData2: Array &lt;IselectorData> = [
  { label: "选项四", remark: "", ischeck: false, isdisabled: false },
  { label: "选项八", remark: "有一点备注", ischeck: false, isdisabled: true },
  { label: "选项九", remark: "有一点备注", ischeck: false, isdisabled: false },
  {
    label: "选项十",
    remark: "描述超级超级超级超级超级超级多的文案",
    ischeck: false,
    isdisabled: false,
  },
  {
    label: "选项十一",
    remark: "描述超级超级超级超级超级超级超级超级超级超级超级多的文案",
    ischeck: false,
    isdisabled: false,
  },
];
        </code></pre>
        <pre class="public-content-code">
        <code
          id="code-2"
          class="language-markup line-numbers"
          style="text-align: left"
        >
        &lt;hxq-selector
          :selectorTitle="'标题二'"
          :selectorType="'check'"
          columns="3"
          :selectorData="selectorData2"
          @getSelectorValues="getSelectorValues"
          keyName="two"
        > &lt;/hxq-selector>
      </code></pre>
      </div>

      <div class="public-flex-box">
        <div class="public-title-bold">基本参数</div>
        <a-table
          :dataSource="dataSource"
          :columns="apiBaseCol"
          :pagination="false"
        />
      </div>
    </div>
    <div class="right-box">
      <selectorList></selectorList>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .left-box {
    width: calc(72% - 10px);
    height: 100%;
    overflow-y: auto;
  }
  .left-box::-webkit-scrollbar {
    width: 0;
  }
  .right-box {
    width: calc(28% - 10px);
    height: 100%;
    background-color: #fff;
    border-radius: 24px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 0;
    }
  }
}
.van-checkbox-group {
  display: flex;
  justify-content: space-between;
  ::v-deep .van-checkbox {
    height: 48px;
    line-height: 48px;
    // border-bottom: 1px solid #eeeeee;
  }
  ::v-deep .van-checkbox:last-child {
    border-bottom: none;
  }
}
</style>
